/**
 * Vite开发环境配置文件
 * 
 * 这个文件定义了项目在开发环境下的Vite配置，包括开发服务器设置、代理配置和插件配置等。
 * Vite是一个现代前端构建工具，它利用浏览器原生ES模块导入特性，提供了极快的开发服务器启动和热更新体验。
 */

// 导入Vite的mergeConfig函数，用于合并多个配置对象
import { mergeConfig } from 'vite'
// 导入ESLint插件，用于在开发过程中进行代码检查
import eslint from 'vite-plugin-eslint'
// 导入基础配置，这个配置包含了开发和生产环境共享的设置
import baseConfig from './vite.config.base'

// 导出合并后的配置
export default mergeConfig(
  {
    // 设置当前模式为开发模式
    // 这会影响一些内部行为，比如环境变量的加载(会加载.env.development文件)
    mode: 'development',
    
    // 开发服务器配置
    server: {
      // 启动服务器时自动在浏览器中打开应用
      open: true,
      // 指定服务器监听的IP地址
      // 使用'0.0.0.0'可以让服务器在所有网络接口上监听，这样局域网内的其他设备也能访问
      host: '0.0.0.0',
      
      // 文件系统配置
      fs: {
        // 严格模式下，只能访问项目工作区内的文件
        // 这是一个安全特性，防止访问工作区外的敏感文件
        strict: true,
      },
      
      // 代理配置，用于解决前端开发中的跨域问题
      // 新手须知：前端和后端通常运行在不同的域名或端口上，浏览器的同源策略会阻止直接请求
      // 代理可以将前端的请求转发到后端，绕过同源策略的限制
      proxy: {
        // 当请求路径以'/api'开头时，会被代理到目标服务器
        '/api': {
          // 目标服务器地址，这里是本地运行的后端服务
          target: 'http://localhost:8080',
          // 修改请求头中的host为目标URL的host，解决CORS问题
          changeOrigin: true,
          // 路径重写，移除路径中的'/api'前缀
          // 例如：请求'/api/users'会被转发到'http://localhost:8080/users'
          rewrite: (path: any) => {
            return path.replace(/^\/api/, '')
          },
        },
      },
    },
    
    // 插件配置
    plugins: [
      // 配置ESLint插件，用于在开发过程中检查代码质量
      eslint({
        // 禁用缓存，每次都重新检查所有文件
        // 在开发环境中，这样可以确保始终获取最新的检查结果
        cache: false,
        // 指定要检查的文件类型和路径
        include: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],
        // 排除不需要检查的文件夹
        exclude: ['node_modules'],
      }),
    ],
  },
  // 合并基础配置
  // 最佳实践：将共享配置抽离到基础配置文件中，然后在不同环境的配置文件中合并，避免重复代码
  baseConfig
)
